//修改生物信息按键触发事件
function getInformation(photo){
    var selectArray = ["#form4 [name='option1']","#form4 [name='option2']","#form4 [name='option3']","#form4 [name='option4']","#form4 [name='option5']","#form4 [name='option6']"];
    //每次点击不同的单选框重置下拉框属性
    for(let i = 0;i<6;i++){
        $(selectArray[i]).attr("selected",false);
    }
    $("#form4 [name='BiologyId']").attr("disabled","true");
    $("#form4 [name='BiologyId']").val(photo.id);
    $("#form4 [name='BiologyImage']").attr("src",photo.src);
    $("#form4 [name='BiologyLocation']").val(photo.src);
    $("#form4 [name='BiologyName']").val(photo.name);
    //获取对应的生物类型
    for(let i = 0;i<6;i++){
        if($(selectArray[i]).val() == photo.type){
            $(selectArray[i]).attr("selected",true);
        }
    }
    //修改生物信息提交按键触发事件
    $('#submit3').click(submitMessage);
    function submitMessage(){
        var Array1 = JSON.parse(localStorage.biology);
        var Xname = $("#form4 [name='BiologyName']").val();
        var XLocation = $("#form4 [name='BiologyLocation']").val();
        var XSelected = $("#selected2").val();
        var Xid = $("#form4 [name='BiologyId']").val();
        Array1[Xid-1].biologyName = Xname;
        Array1[Xid-1].location = XLocation;
        Array1[Xid-1].type = XSelected;
        localStorage.biology = JSON.stringify(Array1);
        var Array2 = JSON.parse(localStorage.biology);
        createFindAnimalBlock(Array2,Array1[Xid-1].type);
        function end1(){
            $('#Modal').modal('hide');
        }
        setTimeout(end1(),1000);
        clickFun(bodyArr,bodyArr2);
        function clickFun(arr1,arr2){
            for(let i = 0;i<6;i++){
                $(arr1[i]).click(function(){createFindAnimalBlock(Array2,arr2[i])});
            }
        };
    }
    //删除生物按钮触发事件
    $('#deleteBiology').click(deleteBiology);
    function deleteBiology(){
        var Array = JSON.parse(localStorage.biology);
        for(let i = 0;i<Array.length;i++){
            if(photo.name == Array[i].biologyName){
                for(let j = i;j<Array.length;j++){
                    Array[j] = Array[j+1];
                    if(j == Array.length-1){
                        Array.length -= 1;
                    }
                }  
            }   
        }
        localStorage.biology = JSON.stringify(Array);
        var Array2 = JSON.parse(localStorage.biology);
        var Xid = $("#form4 [name='BiologyId']").val();
        createFindAnimalBlock(Array2,Array[Xid-1].type);
        clickFun(bodyArr,bodyArr2);
        function clickFun(arr1,arr2){
            for(let i = 0;i<6;i++){
                $(arr1[i]).click(function(){createFindAnimalBlock(Array2,arr2[i])});
            }
        };
        function end(){
            $('#Modal').modal('hide');
        }
        setTimeout(end(),1000);
    }
}
var bodyArr = ['#biology1','#biology2','#biology3','#biology4','#biology5','#biology6'];
var bodyArr2 = ["Boss","被动型","攻击型","可驯服","效用型","中立型"];
function createColumn(){
    var div = $('<div></div>').addClass("animal-column");
    return div;
}
//加入图片
function addImg(id,location,name,type){
    var img = $('<img></img>').attr({"src":location,"id":id,"name":name});
    $(img).prop("type",type);
    $(img).attr({
        "data-toggle":"modal",
        'onclick' : 'getInformation(this)',
        "data-target":"#Modal"
    });
    return img;
}
//加入添加生物图片
function addImg1(location){
    var img = $('<img></img>').attr("src",location);
    $(img).attr({
        "data-toggle":"modal",
        "data-target":"#Modal1",    
    });
    return img;
}
//加入名字
function addName(name){
    var p = $('<p></p>').text(name);
    $(p).addClass('animal-p');
    return p;
}
function createFindAnimalBlock(arr,xxx){
    $('#animalList').empty();
    for(let i = 0;i<arr.length;i++){
        if(arr[i].type == xxx){
        var block = createColumn();
        $(block).append(addImg(arr[i].id,arr[i].location,arr[i].biologyName,arr[i].type));
        $(block).append(addName(arr[i].biologyName));
        $('#animalList').append(block);
        }   
    }
    var block1 = createColumn();
    $(block1).append(addImg1('./img/0.jpg')); 
    $(block1).append(addName('添加生物'));
    $('#animalList').append(block1); 
}
$(function(){
    //未进行登录时禁用修改信息和注销按钮
    var arr2 = ['#btn3','#btn4'];
    fun6(arr2);
    var userPhone,userName,userPassword,userImage,userPhone1,userPassword1,importantNumber,storage = window.localStorage;
    if(storage.user == undefined&&storage.biology == undefined){
        init();
        fun11();
        fun10();
        stringifyBiology();
        parseBiology();  
    }
    var User = JSON.parse(window.localStorage.user);
    var Biology = JSON.parse(window.localStorage.biology);
    //点击登录模态框的提交按键触发事件
    $('#enroll').click(fun1);
    function fun1(){
        fun12();
        fun16();
        fun10();
        //检查输入的手机号 1.手机号正确 判断密码 2.手机号未注册
        var time = 1;
        importantNumber = 0;
        if(userPhone1 == ''){
            alert("手机号未填写");
        }
        if(userPassword1 == ""){
            alert("密码未填写");
        }
        for(let x = 1;x<User.length;x++){
            if(userPhone1 != User[x].phone){
                time += 1;
                continue;
            }
            if(userPhone1 == User[x].phone&&userPassword1 !=User[x].password&&userPassword1 !=''){
                alert("输入密码错误");
            }   
        }
        if(time == User.length&&userPhone1 !=''){
            alert("该手机号未注册");
        } 
        label: for(let i = 1;i<User.length;i++){
            if(userPhone1 == User[i].phone&&userPassword1 == User[i].password){
                console.log("登录成功");
                importantNumber = i;
                $('#innerText').text("用户名:"+User[i].name);
                $('#smileImage').attr("src",User[i].headicon);
                var arr1 = ['#btn1','#btn2','#btn3','#btn4'];
                fun6(arr1);
                setTimeout(fun9('#myModal1'),1000);
                break label;
            }  
        }
    };
    //修改信息按键触发事件
    $('#btn3').click(fun13);
    function fun13(){
        $("#form3 [name='Userpassword']").attr("disabled","true");
        $("#form3 [name='Userimage']").attr("src",User[importantNumber].headicon);
        $("#form3 [name='Userphone']").val(userPhone1);
        $("#form3 [name='Username']").val(User[importantNumber].name);
        $("#form3 [name='Userpassword']").val(userPassword1); 
    }
    //点击修改信息模态框里面的提交按钮触发事件
    $('#submit2').click(fun15);
    function fun15(){
        //做一个数组 数组元素为用户对象 用户对象中包含用户的信息
        //分别从表单获取phone name password值
        var isRight = false;
        var wuhu = true;
        fun10();
        fun17();
        //登录框表单里面的值需要与json对象数组中的对象匹配
        if(userPassword.length<5&&wuhu == true){
            wuhu = false;
            alert("密码输入格式错误，请重新输入");
        }
        if(userPassword >=5&&wuhu == true){
            //User对象并没有保存在localStorage中 每次刷新页面都会消失 使用parse()将字符串转换成JSON对象赋给User
            User[importantNumber] = {"id":importantNumber,"phone":userPhone,"name":userName,"password":userPassword,"headicon":userImage};
            fun11();
            isRight = true;
            $('#innerText').text("用户名:"+userName);
            $('#smileImage').attr("src",User[importantNumber].headicon);
        }
        //关闭注册模态框
        if(isRight){
            setTimeout(fun9('#myModal3'),1000);
        }    
    };
    //点击修改信息里面的修改密码按键触发事件 禁用状态点击 密码框禁用解除 可以修改密码 解除状态点击 密码框禁用开启 无法修改密码
    $('#changePassword').click(fun14);
    //注销按键触发事件
    $('#btn4').click(fun4);
    function fun4(){
        var arr3 = ['#btn3','#btn4','#btn1','#btn2'];
        fun6(arr3);
        fun8();
        $('#innerText').text("用户名:请进行登录或注册");
        $('#smileImage').attr("src","./img/logo1.jpg");
    };
    //点击头像变换头像
    //通过获取头像设置的imageId属性 点击头像进行图片1-5之间的变换
    var imageId = $('#myModal2-image').attr("imageId");
    $('#myModal2-image').click(fun5);
    function fun5(){
        if(imageId <= 4){
            imageId++;
            $('#myModal2-image').attr("src","./img/logo"+imageId+".jpg");
        }
        else{
            for(let i = 1;i<5;i++){
                imageId--;
            }
            $('#myModal2-image').attr("src","./img/logo"+imageId+".jpg");
        }
    }
    var imageId1 = $('#myModal3-image').attr("imageId1");
    $('#myModal3-image').click(fun18);
    function fun18(){
        if(imageId1 <= 4){
            imageId1++;
            $('#myModal3-image').attr("src","./img/logo"+imageId1+".jpg");
        }
        else{
            for(let i = 1;i<5;i++){
                imageId1--;
            }
            $('#myModal3-image').attr("src","./img/logo"+imageId1+".jpg");
        }
    }
    //点击注册提交按钮 将注册填写的信息传递给localStorage
    $('#submit1').click(fun7);
    //设置localStorage
    function init(){
        if(!window.localStorage){
            alert("浏览器不支持localStorage");
            return false;
        }else{
            User = [{"id":"init","phone":"init","name":"init","password":"init","headicon":"init"}];
            var BiologyName = ["凋灵","末影龙","豹猫","蝙蝠","村民","鸡","马","哞菇","牛","兔子","羊","鱿鱼","猪","凋灵骷髅","蠹虫","恶魂","鸡骑士","僵尸","骷髅","烈焰人","末影螨","女巫","爬行者","潜影贝","史莱姆","守卫者","岩浆怪","远古守卫者","蜘蛛骑士","狼","铁傀儡","雪傀儡","北极熊","洞穴蜘蛛","僵尸猪人","末影人","蜘蛛"];
            var ImgLocation = [];
            for(let x = 0;x<37;x++){
                ImgLocation[x] = "./img/img"+(x+=1)+".png";
                x -= 1;
            }
            Biology = [];
            for(let i = 0;i<37;i++){
                Biology.length = i;
                if(i<2){
                    Biology[Biology.length] = {"id":i+1,"biologyName":BiologyName[i],"location":ImgLocation[i],"type":"Boss"};
                }
                else if(i<13){
                    Biology[Biology.length] = {"id":i+1,"biologyName":BiologyName[i],"location":ImgLocation[i],"type":"被动型"};
                }
                else if(i<29){
                    Biology[Biology.length] = {"id":i+1,"biologyName":BiologyName[i],"location":ImgLocation[i],"type":"攻击型"};
                }
                else if(i<30){
                    Biology[Biology.length] = {"id":i+1,"biologyName":BiologyName[i],"location":ImgLocation[i],"type":"可驯服"};
                }
                else if(i<32){
                    Biology[Biology.length] = {"id":i+1,"biologyName":BiologyName[i],"location":ImgLocation[i],"type":"效用型"};
                }
                else if(i<37){
                    Biology[Biology.length] = {"id":i+1,"biologyName":BiologyName[i],"location":ImgLocation[i],"type":"中立型"};
                }
            }
            fun11();
            stringifyBiology();
        }   
    }
    //按钮禁用函数
    function fun6(arr){
        for(let i = 0;i<2;i++){
            $(arr[i]).attr("disabled","true");
        }
        for(let j = 2;j<arr.length;j++){
            $(arr[j]).removeAttr("disabled");
        }
    }
    function fun7(){
        //做一个数组 数组元素为用户对象 用户对象中包含用户的信息
        //分别从表单获取phone name password值
        var isRight = false;
        var wuhu = true;
        fun12();
        fun11();
        fun10();
        if(userPhone == ''){
            alert("手机号未填写");
        }
        if(userPassword == ''){
            alert("密码未填写");
        }
        if(userName == ''){
            alert("用户名未填写");
        }
        label: for(let i = 1;i<User.length;i++){
            if(userPhone == User[i].phone){
                wuhu = false;
                alert("此手机号已经注册");
                break label;
            }
        }
        if(userPhone.length<11&&wuhu == true&&userPhone != ''){
            wuhu = false;
            alert("手机号输入格式错误，请重新输入");
        }
        if(userPassword.length<5&&wuhu == true&&userPassword != ''){
            wuhu = false;
            alert("密码输入格式错误，请重新输入");
        }
        if(userPhone.length==11&&userPassword >=5&&wuhu == true&&userName != ''){
            //User对象并没有保存在localStorage中 每次刷新页面都会消失 使用parse()将字符串转换成JSON对象赋给User
            User[User.length] = {"id":User.length,"phone":userPhone,"name":userName,"password":userPassword,"headicon":userImage};
            fun11();
            fun10();
            isRight = true;
        }
        //关闭注册模态框
        if(isRight){
            setTimeout(fun9('#myModal2'),1000);
        }    
    };
    //点击注销清除表单数据函数
    function fun8(){
        $("#form1 [name='Userphone']").val('');
        $("#form1 [name='Username']").val('');
        $("#form1 [name='Userpassword']").val('');
        $("#form2 [name='user-phone1']").val('');
        $("#form2 [name='user-password1']").val('');
        $("#form3 [name='Userphone']").val('');
        $("#form3 [name='Username']").val('');
        $("#form3 [name='Userpassword']").val('');
        $("#form4 [name='BiologyId']").val('');
        $("#form4 [name='BiologyLocation']").val('');
        $("#form4 [name='BiologyName']").val('');
        $("#form5 [name='BiologyName']").val('');
        $("#form5 [name='BiologyLocation']").val('');
        $("#selected1").val('');
    }
    //关闭模态框函数
    function fun9(modal){
        $(modal).modal('hide');
    }
    //localStorage字符串转换成json对象
    function fun10(){
        User = JSON.parse(storage.user);
    }
    //json对象转换成localStorage字符串
    function fun11(){
        storage.user = JSON.stringify(User);
    }
    //获取表单数据函数
    function fun12(){
        userPhone = $("#form1 [name='Userphone']").val();
        userName = $("#form1 [name='Username']").val();
        userPassword = $("#form1 [name='Userpassword']").val(); 
        userImage = $("#form1 [name='Userimage']").attr("src");
    }
    function fun16(){
        userPhone1 = $("#form2 [name='user-phone1']").val();
        userPassword1 = $("#form2 [name='user-password1']").val();
    }
    function fun17(){
        userPhone = $("#form3 [name='Userphone']").val();
        userName = $("#form3 [name='Username']").val();
        userPassword = $("#form3 [name='Userpassword']").val();
        userImage = $("#form3 [name='Userimage']").attr("src");
    }
    //关闭每个模态框时清除表单内填入的数据
    var btnArr = ['#close1','#close2','#close3',"#close4","#close5",'#headclose1','#headclose2','#headclose3',,'#headclose4','#headclose5','#submit1','#submit2','#enroll'];
    clean_upData(btnArr);
    function clean_upData(arr){
        for(let y = 0;y<arr.length;y++){
            $(arr[y]).click(fun8);
        }
    }
    //点击修改信息里面的修改密码按键触发事件
    function fun14(){
        if($("#form3 [name='Userpassword']").attr("disabled") == "disabled"){
            $("#form3 [name='Userpassword']").removeAttr("disabled");
        }
        else{
            $("#form3 [name='Userpassword']").attr("disabled","true");
        }
    };
    //生物字符串转对象
    function parseBiology(){
        Biology = JSON.parse(storage.biology);
    }
    //生物对象转字符串
    function stringifyBiology(){
        storage.biology = JSON.stringify(Biology);
    }
    //六个单选框按键触发事件
    $('#biology1').click(function(){createAnimalBlock(Biology,"Boss")});
    $('#biology2').click(function(){createAnimalBlock(Biology,"被动型")});
    $('#biology3').click(function(){createAnimalBlock(Biology,"攻击型")});
    $('#biology4').click(function(){createAnimalBlock(Biology,"可驯服")});
    $('#biology5').click(function(){createAnimalBlock(Biology,"效用型")});
    $('#biology6').click(function(){createAnimalBlock(Biology,"中立型")});
    //创建div块
    function createColumn(){
        var div = $('<div></div>').addClass("animal-column");
        return div;
    }
    //加入图片
    function addImg(id,location,name,type){
        var img = $('<img></img>').attr({"src":location,"id":id,"name":name});
        $(img).prop("type",type);
        $(img).attr({
            "data-toggle":"modal",
            'onclick' : 'getInformation(this)',
            "data-target":"#Modal"
        });
        return img;
    }
    //加入添加生物图片
    function addImg1(location){
        var img = $('<img></img>').attr("src",location);
        $(img).attr({
            "data-toggle":"modal",
            "data-target":"#Modal1",    
        });
        return img;
    }
    //加入名字
    function addName(name){
        var p = $('<p></p>').text(name);
        $(p).addClass('animal-p');
        return p;
    }
    //整合（div+图片+名字）
    function createAnimalBlock(arr,xxx){
        $('#animalList').empty();
        for(let i = 0;i<arr.length;i++){
            if(arr[i].type == xxx){
                var block = createColumn();
                $(block).append(addImg(arr[i].id,arr[i].location,arr[i].biologyName,arr[i].type));
                $(block).append(addName(arr[i].biologyName));
                $('#animalList').append(block);
            }    
        }
        var block1 = createColumn();
        $(block1).append(addImg1('./img/0.jpg')); 
        $(block1).append(addName('添加生物'));
        $('#animalList').append(block1); 
    }
    //添加生物模态框提交按钮触发事件
    $('#submit4').click(createBiology);
    function createBiology(){
        var Bname,Blocation,Btype,wasRight,qifei = true;
        Bname = $("#form5 [name='BiologyName']").val();
        Blocation = $("#form5 [name='BiologyLocation']").val();
        Btype = $("#selected1").val();
        if(Bname == ''){
            alert("生物名未填写");
        }
        label: for(let i = 1;i<Biology.length;i++){
            if(Bname == Biology[i].biologyName){
                qifei = false;
                alert("此生物名已经存在");
                break label;
            }
        }
        if(qifei == true){
            console.log(Biology);
            Biology[Biology.length] = {"id":Biology.length+1,"biologyName":Bname,"location":Blocation,"type":Btype};
            stringifyBiology();
            parseBiology();
            wasRight = true;
        }
        if(wasRight){setTimeout(fun9('#Modal1'),1000);}
    }
    //搜索框触发事件
    $('#find').click(wantFind);
    function wantFind(){
        var want = $('#wantFind').val();
        var findArray = [];
        var u = 0;
        if(want == ''){
            alert("请输入想要搜素的生物名");
        }
        for(let i = 0;i<Biology.length;i++){
            if(want == Biology[i].biologyName.substring(0,want.length)){
                findArray[u] = Biology[i];
                u += 1;
            }else if(i == Biology.length-1&&u==0){
                alert('没有此生物，请重新输入');
            }              
        }    
        //点击搜索按钮出现对应的生物
        createFindAnimalBlock(findArray);
        function createFindAnimalBlock(arr){
            $('#animalList').empty();
            for(let i = 0;i<arr.length;i++){
                var block = createColumn();
                $(block).append(addImg(arr[i].id,arr[i].location,arr[i].biologyName,arr[i].type));
                $(block).append(addName(arr[i].biologyName));
                $('#animalList').append(block);   
            }
        }    
        $('#wantFind').val('');
    }
});